<template>
	<view class="page">
		
		<!-- 轮播图 start -->
		<swiper :indicator-dots="true" :autoplay="true" class="carousel">
			<swiper-item v-for="carousel in carouselList" :key="carousel.movieId">
				<image :src="carousel.image" class="carousel"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		
		<!-- 热门超英 start -->
		<view class="page-block super-hot">
			<view class="title-wrapper">
				<image src="../../static/icos/hot.png" class="hot-ico"></image>
				<view class="hot-title">
					热门超英
				</view>
			</view>
		</view>
		
		<scroll-view scroll-x="true" class="page-block hot">
			<view class="single-poster" v-for="superhero in superheroList" :key="superhero.id">
				<view class="poster-wraper">
					<image :src="superhero.cover" class="poster"></image>
					<view class="poster-name">
						{{superhero.name}}
					</view>
					<trailerStar showNum="1" :score="superhero.score"></trailerStar>
					
					<!-- <view class="poster-score-wrapper">
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
						<image src="../../static/icos/star-gray.png" class="star-ico"></image>
						<view class="poster-score">
							9.1
						</view>
					</view> -->
					
				</view>
			</view>

		</scroll-view>
		<!-- 热门超英 end -->
		<!-- 热门预告 start -->
		<view class="page-block super-hot">
			<view class="title-wrapper">
				<image src="../../static/icos/interest.png" class="hot-ico"></image>
				<view class="hot-title">
					热门预告
				</view>
			</view>
		</view>
		<view class="page-block hot-trailer">
			<video  v-for="trailer in trailerList"
					:id="trailer.id"
					:data-id="trailer.id"
					@play="playMeNowing"
					:src="trailer.trailer" 
					:poster="trailer.poster"
					class="movie-trailer-single"
					:key="trailer.id"
					controls></video>
		</view>
		<!-- 热门预告 end -->
		
		<!-- 猜你喜欢 start -->
		<view class="page-block super-hot">
			<view class="title-wrapper">
				<image src="../../static/icos/guess-u-like.png" class="hot-ico"></image>
				<view class="hot-title">
					猜你喜欢
				</view>
			</view>
		</view>
		<view class="page-block like-movie">
			<view class="single-movie-wraper" v-for="(guess,gIndex) in guessULikeList">
				<image :src="guess.cover" class="movie-poster"></image>
				<view class="movie-desc">
					<view class="movie-title">
						{{guess.name}}
					</view>
					<trailerStar showNum="0" :score="9"></trailerStar>
					<view class="movie-info">
						{{guess.basicInfo}}
					</view>
					<view class="movie-info">
						{{guess.releaseDate}}
					</view>
				</view>
				<view class="movie-operation" :data-gIndex="gIndex" @click="praiseMe">
					<image src="../../static/icos/praise.png" class="op-good-pic"></image>
					<view class="op-good">
						点赞
					</view>
					<view :animation="animationDataArr[gIndex]" class="op-good op-good-opacity">
						+1
					</view>
				</view>
			</view>
			
			<!-- <view class="single-movie-wraper">
				<image src="http://122.152.205.72:88/superhero/MARVEL/Avengers3/cover.png" class="movie-poster"></image>
				<view class="movie-desc">
					<view class="movie-title">
						蜘蛛侠大战中国僵尸蜘蛛侠大战中国僵尸蜘蛛侠大战中国僵尸
					</view>
					<trailerStar showNum="0" :score="9"></trailerStar>
					<view class="movie-info">
						2018 / 美国 / 科幻 / 超级英雄
					</view>
					<view class="movie-info">
						上映时间：2017-09-08(中国大陆) 
					</view>
				</view>
				<view class="movie-operation" @click="praiseMe">
					<image src="../../static/icos/praise.png" class="op-good-pic"></image>
					<view class="op-good">
						点赞
					</view>
					<view :animation="animationData" class="op-good op-good-opacity">
						+1
					</view>
				</view>
			</view> -->
		</view>
		<!-- 猜你喜欢  end -->
		
	</view>
</template>

<script>
	// import common from "../../common/common.js"
	import trailerStar from "../../components/trailerStar/trailerStar.vue"
	export default {
		data() {
			return {
				carouselList:[],
				superheroList:[],
				trailerList:[],
				guessULikeList:[],
				animationData:{},  // 当前动画对象信息，必须保持在这里，成为双向帮定制
				animationDataArr:[
					{},{},{},{},{}
				],
			}
		},
		// 下拉刷新enablePullDownRefresh
		onPullDownRefresh(){
			this.refresh();
		},
		onLoad() {
			// debugger;
			// 创建动画 已经修复了报错, 写一个条件
			// #ifdef APP-PLUS || MP-WEIXIN
			var animation = uni.createAnimation();
			this.animation = animation;
			// #endif
			uni.request({
				url: this.serverUrl+'/index/carousel/list?'+this.visitKey, //仅为示例，并非真实接口地址。
				method:"POST",
				success: (res) => {
					// debugger;
					if(res.data.status === 200){
						this.carouselList = res.data.data;
					}
				}
			});
			// 请求热门超英
			uni.request({
				url: this.serverUrl+'/index/movie/hot?type=superhero&'+this.visitKey, //仅为示例，并非真实接口地址。
				method:"POST",
				success: (res) => {
					// debugger;
					if(res.data.status === 200){
						this.superheroList = res.data.data;
					}
				}
			});
			
			// 请求热门预告
			uni.request({
				url: this.serverUrl+'/index/movie/hot?type=trailer&'+this.visitKey, //仅为示例，并非真实接口地址。
				method:"POST",
				success: (res) => {
					// debugger;
					if(res.data.status === 200){
						this.trailerList = res.data.data;
					}
				}
			});
			
			this.refresh(); //猜你喜欢
		},
		onUnload(){
			// 是否有用，有待验证
			this.animation = {};
			this.animationDataArr = [{},{},{},{},{}];
		},
		methods: {
			playMeNowing(e){//当下播放我
				let playingId = e.currentTarget.dataset.id;
				let trailerList = this.trailerList;
				trailerList.forEach(item=>{
					let id = item.id;
					if(playingId !== id){//不是当前，就播放
						uni.createVideoContext(id).pause();
					}
				})
				
			},
			// 下拉刷新
			refresh(){
				
				// loading
				uni.showLoading({
					mask: true
				})
				uni.showNavigationBarLoading();
				
				
				// 猜你喜欢
				uni.request({
					url: this.serverUrl+'/index/guessULike?'+this.visitKey, //仅为示例，并非真实接口地址。
					method:"POST",
					success: (res) => {
						// debugger;
						if(res.data.status === 200){
							this.guessULikeList = res.data.data;
						}
					},
					complete:() => {
						uni.hideLoading();
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}
				});
			},
			// 点赞（
			praiseMe(e){
				// #ifdef APP-PLUS || MP-WEIXIN
				// 获取gIndex，注意使用data. dataset
				let gIndex = e.currentTarget.dataset.gindex;
				// console.log(e,gIndex)
				// return;
				// 定义动画对象，一会儿把这个信息，导出给animationData
				this.animation.opacity(1).translateY(-60).step({
					duration:400,
					timingFunction: 'ease'
				})
				// 导出赋值给动画绑定属性
				// this.animationData = this.animation.export();
				
				// 把当前临时的对象，赋值给当前动画对象
				this.animationData = this.animation;
				this.animationDataArr[gIndex] = this.animationData.export();
				
				// 恢复动画
				setTimeout(() => {
					this.animation.opacity(0).translateY(0).step({
						duration:0
					});
					this.animationData = this.animation;
					this.animationDataArr[gIndex] = this.animationData.export();
					
				}, 500);
				
				// #endif
			}
		},
		components:{
			trailerStar
		}
	}
</script>

<style>
	@import url("index.css");
</style>
